import { FC, useState, useMemo, useEffect } from 'react';
import { Layout } from 'antd';

import { Typography, Space } from 'antd';

import { formatDate } from '@/utils';
import { useWt } from './useWt';

import { useSelector, useHistory } from 'umi';

const { Text, Link } = Typography;

const Head: FC = () => {
  const [time, set_time] = useState<number>(new Date().getTime());
  const [wtNm, wtTemp] = useWt();
  const history = useHistory();

  const titleName = useSelector((state: any) => state.title.titleName);

  const now = useMemo(() => {
    return formatDate(time);
  }, [time]);

  useEffect(() => {
    const timer = setInterval(() => {
      set_time(new Date().getTime());
    }, 1000);

    return () => {
      clearInterval(timer);
    };
  }, []);

  // useEffect(() => {
  //   setTimeout(() => {
  //     set_time(new Date().getTime());
  //   }, 1000);
  // }, [time]);

  const exit = () => {
    history.push('/login');
  };

  return (
    <>
      <Layout.Header
        className="site-layout-background head"
        style={{ padding: '0 20px', textAlign: 'right' }}
      >
        <Space size="large">
          <Text>欢迎你，陈前</Text>
          <Link onClick={exit}>退出</Link>
        </Space>
      </Layout.Header>
      <div className="nav">
        <div className="left">{titleName}</div>
        <div className="right">
          {wtTemp}℃ - {wtNm} - {now}
        </div>
      </div>
    </>
  );
};

export default Head;
